var shopS = document.querySelector('.shopS')
let cartall = document.querySelector('.cartall')
let savetall = document.querySelector('.savetall');
console.log(shopS)

rander(lists)
var $tr;
var shopList = document.querySelectorAll('.shopList')

shopS.addEventListener('click',(e)=>{
        e = e || e.window
        $tr = e.target.parentNode.parentNode
        console.log($tr)
        switch(e.target.className){
            case 'add': 
                lists.forEach((shop)=>{
                    if(shop.id == $tr.getAttribute('idx')){
                        shop.num += 1
                    }
                })
            break;
            case 'reduce' :
                lists.forEach((shop)=>{
                    if(shop.id == $tr.getAttribute('idx')){
                       if(shop.num === 0){
                            shop.num = 0
                       }else{
                        shop.num -= 1
                       }
                    }
                })
            break;
            case 'del':
                var firm = confirm('确定要删除改商品吗')
                if(firm){
                    lists.forEach((shop,index,arr)=>{
                        if(shop.id == $tr.getAttribute('idx')){
                           arr.splice(index,1)
                        }
                    })
                }
        }
        rander(lists)
    })

function rander (goodList){
    var res = 0
    shopS.innerHTML = goodList.map((itme,index)=>{
        res += itme.nowPrice * itme.num
        return `<tr class="shopList" idx="${itme.id}">
        <td class="imgTd">
            <img class="shops" src="../images/${itme.img}" alt="" srcset="">
        </td>
        <td class="titleTd">
            <h6>Vans范斯 经典系列 Old Skool板鞋运动鞋 低帮经典款男女官方正品</h6>
            <span>ID:#${itme.id}</span>
            <span>Size:${itme.size}</span>
        </td>
        <td class="Son2">
            <span class="reduce">-</span>
            <input type="text" value="${itme.num}" class="count">
            <span class="add">+</span>
        </td>
        <td class="Son3">
            <del class="oriPrice">${itme.oriPrice} py6</del>
            <b class="nowPrice">${itme.nowPrice} py6</b>
        </td>
        <td class="Son4">
            <span class="priceAll">${(itme.nowPrice * itme.num).toFixed(2)} py6</span>
            <span class="saveAll">You save ${(itme.num * (itme.oriPrice - itme.nowPrice)).toFixed(2)} py6</span>
        </td>
        <td class="Son5">
            <img class="del" src="../images/del.png" alt="" class="del">
        </td>
    </tr>`
    }).join('')
    cartall.firstElementChild.innerHTML = res.toFixed(2) + 'py6.'

    let num =  goodList.reduce((pre,cur,index)=>{
        return pre + cur.num * (cur.oriPrice - cur.nowPrice)
    },0)
    savetall.innerHTML = `Your Total Saving: ${num.toFixed(2)} py6`
}

